<template>
  <view class="">
    <view class="header">
      <u-navbar title="" leftIconColor="#fff" :titleStyle="{ color: '#Fff' }" bgColor="#21cd92"></u-navbar>
      <view class="headerInfo">
        <image src="../../static/home/dui.png" class="img" mode="scaleToFill" />
        <view>
          <view class="statusTitle">下单成功</view>
          <view class="statusTitle2">感谢您的购买</view>
        </view>
      </view>
    </view>
    <view class="main">
      <CommonTitle title="订单消息" isShow />
      <view class="shopSelect">
        <view class="left">
          <u-scroll-list :indicator="false">
            <view class="imgBox" v-for="(item, index) in 8" :key="index">
              <image src="" mode=""></image>
            </view>
          </u-scroll-list>
        </view>
        <view class="right">
          共5件
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="infoList">
        <view class="infoItem">
          <view class="label">订单编号</view>
          <view class="value">{{ orderInfo?.orderNo }}</view>
        </view>
        <view class="infoItem">
          <view class="label">订单金额</view>
          <view class="value">￥{{ orderInfo?.actualAmount }}</view>
        </view>
        <view class="infoItem">
          <view class="label">下单时间</view>
          <view class="value">{{ dayjs(orderInfo?.payTime).format("YYYY-MM-DD HH:mm:ss") }}</view>
        </view>
      </view>
    </view>
    <view class="bottomBox">
      <u-button text="订单详情" @click="goPage" color="#02409a"></u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import CommonTitle from "../../components/commonTitle.vue";
import { onBeforeMount, ref } from "vue";
import dayjs from "dayjs";
const { orderId } = defineProps<{
  orderId: string;
}>();
const orderInfo = ref();
onBeforeMount(async () => {});
const goPage = () => {
  uni.switchTab({
    url: "/pages/home/home",
  });
};
</script>

<style lang="less" scoped>
.header {
  height: 400rpx;
  background: linear-gradient(180deg, #21cd91 0%, #27ca9e 82%, #28c9a0 100%);
  .headerInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40rpx;
    .img {
      width: 112rpx;
      height: 112rpx;
      margin-right: 32rpx;
    }

    .statusTitle {
      font-size: 44rpx;
      font-weight: 800;
      color: #fff;
    }
    .statusTitle2 {
      color: #fff;
      font-size: 30rpx;
      line-height: 50rpx;
    }
  }
}
.main {
  background: #ffffff;
  border-radius: 20rpx;
  margin-top: -140rpx;
  position: relative;
  padding: 1rpx 32rpx;
  &::before {
    content: "";
    position: absolute;
    left: -15rpx;
    width: 105%;
    height: 32rpx;
    background: #14b182;
    border-radius: 16rpx;
    z-index: -1;
  }
  .shopSelect {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left {
      width: 88%;
    }
    .right {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 6%;
      text-align: center;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #1e1e1e;
      line-height: 32rpx;
    }
    .imgBox {
      width: 176rpx;
      height: 176rpx;
      border-radius: 8rpx;
      position: relative;
      margin-top: 30rpx;
      margin-right: 20rpx;
      image {
        width: 176rpx;
        height: 176rpx;
        background: #7ca6bc;
      }
    }
  }
  .infoList {
    box-sizing: border-box;
    width: 100%;
    padding: 0 24rpx;
  }

  .infoItem {
    display: flex;
    justify-content: space-between;
    color: #303133;
    font-size: 28rpx;
    line-height: 100rpx;

    .value {
      width: 79%;
      font-weight: 700;
    }
  }
}
.bottomBox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100rpx, 1fr)); /* 自适应列布局 */
  gap: 10px; /* 子元素之间的间距 */
}
.shopSelect {
  display: flex;
  justify-content: space-between;
  .left {
    width: 88%;
  }
  .right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6%;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #1e1e1e;
    line-height: 32rpx;
  }
  .imgBox {
    width: 176rpx;
    height: 176rpx;
    border-radius: 8rpx;
    position: relative;
    margin-top: 30rpx;
    margin-right: 20rpx;
    image {
      width: 176rpx;
      height: 176rpx;
      background: #7ca6bc;
    }
  }
}
</style>
